<template>
	<view>
		<!-- 导航栏 -->
		<view class="header">
			<view class="search-bar">
				<view class="search-input">
					<view class="search-icon">
						<image src="../../static/icon/search.png"></image>
					</view>
					<view class="search-content"><input type="text" placeholder="请输入小区名或地址" @confirm="searchHome" v-model="content" placeholder-class="placeHolderClass"></view>
					<view class="close-icon" v-if="content.length > 0" @click="clear">
						<image src="../../static/icon/close.png" mode=""></image>
					</view>
				</view>
				<view class="findHome" @click="goMapSearch">
					<image src="../../static/icon/location-2.png"></image>
				</view>
			</view>
			<!-- 条件搜索 -->
			<dropChoose :condition="tab" @region="regionChoose" @price="priceChoose" @type="typeChoose" @size="sizeChoose" @more="moreChoose"></dropChoose>
		</view>
		<view class="soleNum">
			<text>独家委托（{{soleNum}}套）</text>
		</view>
		<!-- 住房列表 -->
		<mescroll-uni :down="downOption" @down="downCallback" :marginTop="top">
			<scroll-view class="homeList" scroll-y style="height: calc(100vh - 266rpx);" @scrolltolower="loadMore" v-if="!isEmpty">
				<view class="home-info" v-for="(item,index) in homeList" :key="index" @click="checkDetail(item.houseId)">
					<view class="home-pic">
						<image :src="item.picUrl[0]" lazy-load="true"></image>
					</view>
					<view class="home-detail">
						<view class="homeName"><text>{{item.houseName}}</text></view>
						<view class="home-address"><text space="nbsp">{{item.provinceString}} |{{item.areaName}}|{{item.buildNum}}栋{{item.roomNum}}</text></view>
						<view class="home-tips">
							<view :class="[{'tips-1':labIndex == 0,'tips-2':labIndex == 1,'tips-3':labIndex == 2}]" v-for="(it,labIndex) in item.label" :key="labIndex"><text>{{it}}</text></view>
						</view>
						<view class="home-price"><text>{{item.price}}万({{item.acreage}}m²|{{item.unitPrice}}元/m²)</text></view>
					</view>
				</view>
				<!-- 加载 -->
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>	
			</scroll-view>
			<view v-if="isEmpty" class="noData">
				<view class="nodata-img">
					<image src="../../static/icon/nodata.png" mode=""></image>
				</view>
				<view class="nodata-content"><text>暂无数据哦～</text></view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import dropChoose from '../../components/drop-choose/drop-choose.vue'
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"				
	export default{
		name:'sole',
		components:{
			dropChoose,uniLoadMore,MescrollUni
		},
		data(){
			return{
				downOption: {
					auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
				},
				top:'266rpx',
				hasFlag: true,
				status: 'loading',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				tab: [{
					id: 1,
					name: '区域'
				}, {
					id: 2,
					name: '售价'
				}, {
					id: 3,
					name: '房型'
				}, {
					id: 4,
					name: '面积'
				}],
				content:'',
				homeList: [],
				areaId:'',//小区id
				beginAcreage:'',//最小面积
				beginBuildNum:'',//最小栋座
				beginLevel:'',//最小楼层
				beginPrice:'',//最低价
				endAcreage:'',//最大面积
				endBuildNum:'',//最大栋座
				endLevel:'',//最大楼层
				endPrice:'',//最高价
				page:0,
				province:'',//区域
				roomNum:'',//房号
				room1:'',//房型（室）
				soleNum:'0',
				isEmpty:false,
				isAdmin:false,//是否为经纪人
			}
		},
		methods:{
			// 获取独家委托列表
			async getOnlyEntrust(){
				if (!this.hasFlag) return // 说明已经没有更多
				this.page = ++this.page
				let res = await this.$fetch(this.$api.oldHouseCondition2,{
					areaId:this.areaId,beginAcreage:this.beginAcreage,beginBuildNum:this.beginBuildNum,beginLevel:this.beginLevel,beginPrice:this.beginPrice,
					endAcreage:this.endAcreage,endBuildNum:this.endBuildNum,endLevel:this.endLevel,endPrice:this.endPrice,pageNum:this.page,entrust:1,province:this.province,
					roomNum:this.roomNum,houseName:this.content,room1:this.room1,pageSize:10
					},'GET')
				res.rows.forEach(item =>{
					if(item.picUrl){
						item.picUrl = item.picUrl.split(',')
					}
					if(item.label){
						item.label = item.label.split(',')
					}
				})
				this.soleNum = res.total;
				if(this.soleNum){
					this.isEmpty = false
				}else{
					this.isEmpty = true
				}
				this.homeList = [...this.homeList,...res.rows]
				this.hasFlag = 10*this.page < res.total
				if(!this.hasFlag){
					this.status = 'noMore'
				}
			},
			// 加载更多
			loadMore(){
				if(this.hasFlag){
					this.getOnlyEntrust()
				}else{
					this.status = 'noMore'
				}
			},
			// 下拉刷新
			downCallback(mescroll){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getOnlyEntrust();
				mescroll.endSuccess();
			},
			// 区域选择
			regionChoose(data){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.province = data;
				this.getOnlyEntrust()
			},
			// 售价选择
			priceChoose(data){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.beginPrice = data[0];
				this.endPrice = data[1];
				this.getOnlyEntrust()
			},
			// 房型选择
			typeChoose(data){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.room1 = data;
				this.getOnlyEntrust()
			},
			// 面积选择
			sizeChoose(data){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.beginAcreage = data[0]
				this.endAcreage = data[1]
				this.getOnlyEntrust()
			},
			// 搜索
			searchHome(){
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getOnlyEntrust()
			},
			// 清空搜索内容
			clear(){
				this.content = ''
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getOnlyEntrust()
			},
			// 更多选择
			moreChoose(data){
				console.log(data);
				this.beginBuildNum = data[0]
				this.endBuildNum = data[1]
				this.beginLevel = data[2]
				this.endLevel = data[3]
				this.roomNum = data[4]
				this.page = 0;
				this.hasFlag = true;
				this.status = 'loading'
				this.homeList = [];
				this.getOnlyEntrust()
			},
			// 查看房源详情
			checkDetail(id){
				uni.navigateTo({
					url:'../oldHouse/oldHouse?houseId='+id+'&houseType=2'
				})
			},
			// 地图找房
			goMapSearch(){
				uni.navigateTo({
					url:'../mapSearch/mapSearch'
				})
			}
		},
		onShow() {
			if(uni.getStorageSync('isAdmin')){
				this.isAdmin = uni.getStorageSync('isAdmin')
				if(this.isAdmin){
					this.tab =  [{id: 1,name: '区域'}, {id: 2,name: '售价'}, {id: 3,name: '房型'}, 
					{id: 4,name: '面积'},{id:5,name:'更多'}]
				}else{
					this.tab = [{id: 1,name: '区域'}, {id: 2,name: '售价'}, {id: 3,name: '房型'}, {id: 4,name: '面积'}]
				}
			}
			this.getOnlyEntrust()
		}
	}
</script>

<style lang="scss">
	.header{
		width: 100%;
		background: #FFFFFF;
		position: fixed;
		top: 0;
		height: 196rpx;
		z-index: 99;
		display: flex;
		flex-direction: column;
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, .06);
	}
	.search-bar {
		width: 100%;
		height: 106rpx;
		display: flex;
		flex-direction: row;
		position: fixed;
		top: 0;
		background: #FFFFFF;
		z-index: 99;
	}
	
	.search-input {
		width: 610rpx;
		height: 72rpx;
		border-radius: 8rpx;
		background: #F1F2F4;
		display: flex;
		flex-direction: row;
		margin-left: 30rpx;
		align-items: center;
		margin-top: 18rpx;
	}
	
	.search-icon {
		margin-left: 30rpx;
		margin-right: 10rpx;
		width: 28rpx;
		height: 28rpx;
		display: flex;
		align-items: center;
	}
	
	.search-icon image {
		width: 28rpx;
		height: 28rpx;
	}
	
	.search-content {
		color: #A6A6A6;
		font-size: 24rpx;
		letter-spacing: 0.28rpx;
		margin-top: 5rpx;
		width: 486rpx;
	}
	.close-icon{
		margin-right: 20rpx;
		width: 36rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
	}
	.close-icon image{
		width: 36rpx;
		height: 36rpx;		
	}
	.findHome {
		margin-left: 30rpx;
		margin-top: 18rpx;
		width: 50rpx;
		height: 72rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	
		image {
			width: 50rpx;
			height: 50rpx;
		}
	}
	.placeHolderClass{
		color: #9B9B9B;
		font-size: 28rpx;
	}
	.soleNum{
		background: #FFFFFF;
		width: 100%;
		height: 70rpx;
		font-size: 28rpx;
		color: #030303;
		letter-spacing: -0.68rpx;
		line-height: 70rpx;
		position: fixed;
		z-index: 10;
		// margin-top: 196rpx;
		top: 196rpx;
		
		text{
			margin-left: 30rpx;
		}
	}
	.homeList {
		width: 100%;
		background: #FFFFFF;
		// margin-top:266rpx;
		.home-info {
			display: flex;
			flex-direction: row;
			margin-left: 30rpx;
			// padding-top: 40rpx;
			height: 250rpx;
			// padding-bottom: 30rpx;
			border-bottom: 2rpx solid #F7F7F7;
		}
	}
	
	.home-pic {
		width: 240rpx;
		height: 180rpx;
		margin-right: 30rpx;
		margin-top: 40rpx;
		border-radius: 4rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-image: url('https://img.bajiaostar.com/FnwyfqiIK3_RD5UR1k66KQ_y0VFx');
	}
	
	.home-pic image {
		width: 240rpx;
		height: 180rpx;
		border-radius: 4rpx;
	}
	
	.home-detail {
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
	
		.homeName {
			width: 420rpx;
			font-size: 28rpx;
			color: #5B5B5B;
			text-align: justify;
			letter-spacing: 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: bold;
		}
	
		.home-address {
			width: 420rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			letter-spacing: 0;
			text-align: justify;
			margin-top: 8rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	
		.home-tips {
			display: flex;
			flex-direction: row;
			margin-top: 10rpx;
	
			.tips-1 {
				background: rgba(241, 78, 44, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #F14E2C;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-2 {
				background: rgba(74, 144, 226, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #4A90E2;
				letter-spacing: 0;
				text-align: justify;
				margin-right: 30rpx;
				height: 36rpx;
				line-height: 36rpx;
			}
	
			.tips-3 {
				background: rgba(211, 160, 221, 0.15);
				border-radius: 8rpx;
				font-size: 20rpx;
				color: #800080;
				letter-spacing: 0;
				text-align: justify;
				height: 36rpx;
				line-height: 36rpx;
			}
		}
	
		.home-price {
			font-size: 28rpx;
			color: #FE9E2E;
			letter-spacing: 0;
			text-align: justify;
			font-size: 24rpx;
			margin-top: 12rpx;
		}
	}
	
	.tips-1 text {
		margin: 0 10rpx;
	}
	
	.tips-2 text {
		margin: 0 10rpx;
	}
	
	.tips-3 text {
		margin: 0 10rpx;
	}
	.noData{
		background: #FFFFFF;
		width: 100%;
		display: flex;
		flex-direction: column;
		
		.nodata-img{
			width: 100%;
			height: 325.6rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 100rpx;
			
			image{
				width: 300rpx;
				height: 325.6rpx;
			}
		}
		
		.nodata-content{
			width: 100%;
			margin-top: 40.4rpx;
			font-size: 24rpx;
			color: #A6A6A6;
			text-align: center;
		}
	}
</style>
